<template>
  <div class="footer-slot-example">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">🦶 Footer 插槽演示</h3>
      <p class="text-base-content/70 text-sm mb-4">
        演示如何使用 <code>#footer</code> 插槽自定义弹窗底部
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 默认底部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">默认底部</h4>
          <p class="text-sm text-base-content/70 mb-4">使用组件默认的底部样式</p>

          <button @click="showDefaultModal = true" class="btn btn-primary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 按钮组底部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">按钮组底部</h4>
          <p class="text-sm text-base-content/70 mb-4">包含多个操作按钮的底部</p>

          <button @click="showButtonModal = true" class="btn btn-secondary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 信息底部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">信息底部</h4>
          <p class="text-sm text-base-content/70 mb-4">显示额外信息的底部</p>

          <button @click="showInfoModal = true" class="btn btn-accent btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 进度底部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">进度底部</h4>
          <p class="text-sm text-base-content/70 mb-4">显示进度条的底部</p>

          <button @click="showProgressModal = true" class="btn btn-warning btn-sm">查看效果</button>
        </div>
      </div>
    </div>

    <!-- 默认底部 Modal -->
    <Modal v-model:visible="showDefaultModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🦶</div>
          <h3 class="text-xl font-bold mb-2">默认底部</h3>
          <p class="text-base-content/70">这是使用默认底部的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 按钮组底部 Modal -->
    <Modal v-model:visible="showButtonModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🔘</div>
          <h3 class="text-xl font-bold mb-2">按钮组底部</h3>
          <p class="text-base-content/70">这是使用按钮组底部的弹窗</p>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-base-200 p-6">
          <div class="flex items-center justify-between">
            <div class="text-sm text-base-content/70">
              <span class="font-semibold">操作提示：</span>请选择相应的操作
            </div>
            <div class="flex gap-3">
              <button @click="close" class="btn btn-outline btn-sm">
                <span class="mr-2">❌</span>
                取消
              </button>
              <button @click="close" class="btn btn-primary btn-sm">
                <span class="mr-2">✅</span>
                确认
              </button>
            </div>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 信息底部 Modal -->
    <Modal v-model:visible="showInfoModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">ℹ️</div>
          <h3 class="text-xl font-bold mb-2">信息底部</h3>
          <p class="text-base-content/70">这是使用信息底部的弹窗</p>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-info/10 border-t border-info/20 p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-info/20 rounded-full flex items-center justify-center">
                <span class="text-info text-sm">ℹ️</span>
              </div>
              <div class="text-sm">
                <div class="font-medium text-base-content">重要提示</div>
                <div class="text-base-content/70">此操作将影响系统设置</div>
              </div>
            </div>
            <button @click="close" class="btn btn-info btn-sm">
              <span class="mr-2">👌</span>
              知道了
            </button>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 进度底部 Modal -->
    <Modal v-model:visible="showProgressModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">📊</div>
          <h3 class="text-xl font-bold mb-2">进度底部</h3>
          <p class="text-base-content/70">这是使用进度底部的弹窗</p>
        </div>
      </template>

      <template #footer="{ close }">
        <div class="bg-base-200 p-6">
          <div class="space-y-4">
            <div class="flex items-center justify-between text-sm">
              <span class="text-base-content/70">处理进度</span>
              <span class="font-medium">{{ progress }}%</span>
            </div>
            <progress
              class="progress progress-primary w-full"
              :value="progress"
              max="100"
            ></progress>
            <div class="flex justify-end gap-3">
              <button @click="close" class="btn btn-outline btn-sm">
                <span class="mr-2">⏹️</span>
                停止
              </button>
              <button @click="close" class="btn btn-primary btn-sm">
                <span class="mr-2">✅</span>
                完成
              </button>
            </div>
          </div>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

defineOptions({
  name: 'FooterSlotExample',
})

// 控制各个Modal的显示状态
const showDefaultModal = ref(false)
const showButtonModal = ref(false)
const showInfoModal = ref(false)
const showProgressModal = ref(false)

// 进度条值
const progress = ref(75)
</script>

<style scoped>
.footer-slot-example {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  background: hsl(var(--b2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
</style>
